/* eslint-disable */
<template>
    <div class="ebook"> 
      <title-bar
      	:ifTitleAndMenuShow="ifTitleAndMenuShow"></title-bar>
      <div class="read-wrapper">
        <div id="read"></div>
        <div class="mask">
          <div class="left" @click="prePage"></div>
          <div class="center" @click="toggleTitleAndMenu"></div>
          <div class="right" @click="nextPage"></div>
        </div>
      </div>
      <menu-bar
      	:ifTitleAndMenuShow="ifTitleAndMenuShow" 
      	:fontSizeList="fontSizeList"
      	:defaultFontSize="defaultFontSize"
      	@setFontSize="setFontSize"
      	:themeList="themeList"
      	:defaultTheme="defaultTheme"
      	@setTheme="setTheme"
      	:bookAvailable="bookAvailable"
      	@onProgressChange="onProgressChange"
      	:navigation="navigation"
      	@jumpTo="jumpTo"
      	ref="menuBar"></menu-bar>
    </div>
</template>

<script>
/* eslint-disable */
import TitleBar from '@/components/TitleBar'
import MenuBar from '@/components/MenuBar'
import Epub from 'epubjs'
const DOWNLOAD_URL = '/static/2018_Book_AgileProcessesInSoftwareEngine.epub'
global.ePub = Epub
export default {
  components: {
  	TitleBar,
  	MenuBar
  },
  data() {
  	return {
  	  ifTitleAndMenuShow: false,
  	  fontSizeList: [
  	    { fontSize: 12 },
  	    { fontSize: 14 },
  	    { fontSize: 16 },
  	    { fontSize: 18 },
  	    { fontSize: 20 },
  	    { fontSize: 22 },
  	    { fontSize: 24 }
  	  ],
  	  defaultFontSize: 16,
  	  themeList: [
  	    {
  	      name: 'default',
  	      style: {
  	      	body: {
  	      	  'color': '#000', 'background': '#fff'
  	      	}
  	      }
  	    },
  	    {
  	      name: 'eye',
  	      style: {
  	      	body: {
  	      	  'color': '#000', 'background': '#ceeaba'
  	      	}
  	      }
  	    },
  	    {
  	      name: 'night',
  	      style: {
  	      	body: {
  	      	  'color': '#fff', 'background': '#000'
  	      	}
  	      }
  	    },
  	    {
  	      name: 'gold',
  	      style: {
  	      	body: {
  	      	  'color': '#000', 'background': 'rgb(241, 236, 226)'
  	      	}
  	      }
  	    },	    
  	  ],
  	  defaultTheme: 0,	
  	  // 图书是否处于可用状态
  	  bookAvailable: false,
  	  navigation: null
  	}
  },
  methods: {
  	// 根据链接跳转到指定位置
  	jumpTo(href) {
  	  this.rendition.display(href)
  	  this.hideTitleAndMenu()
  	},
  	hideTitleAndMenu() {
  	  // 隐藏标题和菜单栏
  	  this.ifTitleAndMenuShow = false
  	  // 隐藏菜单栏弹出的设置栏
  	  this.$refs.menuBar.hideSetting()
  	  // 隐藏目录
  	  this.$refs.menuBar.hideContent()
  	},
  	// progress 进度条的数值 (0-100)
  	onProgressChange(progress) {
  	  const percentage = progress / 100
  	  const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
      this.rendition.display(location)  	
  	},
  	// 设置主题样式
  	setTheme(index) {
  	  this.themes.select(this.themeList[index].name)
  	  this.defaultTheme = index
  	},
  	// 注册主题样式
  	registerTheme() {
  	  this.themeList.forEach(theme => {
  	  	this.themes.register(theme.name, theme.style)
  	  })
  	},
  	// 设置字体大小
  	setFontSize(fontSize) {
  	  this.defaultFontSize = fontSize
  	  if (this.themes) {
  	  	this.themes.fontSize(fontSize + 'px')
  	  }
  	},
  	// 菜单栏和底部导航栏的切换
  	toggleTitleAndMenu() {
  	  this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow	
  	  if (!this.ifTitleAndMenuShow) {
  	  	this.$refs.menuBar.hideSetting()
  	  }
  	},
  	// 上一页
  	prePage() {
      // Rendition.prev
      if(this.rendition){
      	this.rendition.prev()
      }
  	},
  	// 下一页
  	nextPage() {
      // Rendition.next
      if(this.rendition){
      	this.rendition.next()
      }
  	},	
    // 电子书的解析和渲染
    showEpub() {
      // 生成book
      this.book = new Epub(DOWNLOAD_URL) 
      // 生成Rendition,通过Book.renderTo
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth,
        height: window.innerHeight
      })
      // 通过Rendition.display渲染电子书
      this.rendition.display()
      // 获取Theme对象
      this.themes = this.rendition.themes
      // 设置默认字体
      this.setFontSize(this.defaultFontSize)
      // this.themes.register(name, styles)
      // this.themes.select(name)
      this.registerTheme()
      this.setTheme(this.defaultTheme)
      // 获取locations对象
      // 通过epubjs的钩子函数来实现
      this.book.ready.then(() => {
      	this.navigation = this.book.navigation
      	return this.book.locations.generate()
      }).then(result => {
      	this.locations = this.book.locations
      	this.bookAvailable = true
      })
    }
  },
  mounted() {
    this.showEpub()
  },
  components: {
    TitleBar,
    MenuBar
  }
}
</script>

<style lang='scss' scoped>
@import 'assets/styles/global';
.ebook {
	position: relative;	
	.read-wrapper {
      .mask {
      	position: absolute;
      	top: 0;
      	left: 0;
      	z-index: 100;
      	display: flex;
      	width: 100%;
      	height: 100%; 
      	.left{
      	  flex: 0 0 px2rem(100);      	  
      	}
      	.center{
      	  flex: 1;      	        	  
      	}
      	.right{
      	  flex: 0 0 px2rem(100);      	      	  
      	}
      }
	}
}
</style>
